.agents-header-container {
    display: flex;
    justify-content: space-between;

    .agent-filter {
        display: flex;
        gap: 10px
    }
}

.agent-prop-key {
    width: 45%;
}

.agent-overview-header {
    display: flex;
    justify-content: center;
    position: relative;

    .agent-chat {
        position: absolute;
        top: 20%;
        left: calc(50% + 30px);
    }
}

.agent-reset-container {
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: 15px;
}

.agent-prop-list-container {
    width: 95%;
    max-width: 100%;

    .edit-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 5px;
        margin-left: -0.75rem;

        .edit-text-box {
            flex: 0.9;
            border: none;
        }

        .delete-icon {
            flex: 0.1;
            display: flex;
            align-items: center;

            i {
                cursor: pointer;
                color: red;
            }
        }
    }
    
    .list-add {
        font-size: 20px;

        i {
            cursor: pointer;
        }
    }
}

.vertical-flexible {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: none;
}

.agent-detail-sections {
    .card {
        margin-bottom: 0px !important;
    }

    .section-min-width {
        min-width: 300px;
    }

    .agent-col {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }

    .agent-detail-section {
        @media (max-width: 423px) {
            height: fit-content;
        }
    
        .agent-prompt-container {
            height: 100%;
    
            .agent-prompt-header {
                background-color: white;
                padding: 15px;
            }

            .agent-prompt-body {
                overflow-y: auto;
                scrollbar-width: none;
                margin-bottom: 0px !important;
            }
        }
    }
}



.agent-detail-overflow {
    overflow-y: auto;
    scrollbar-width: none;
}

.routing-rule-container {
    .rule-header {
        margin-top: 5px;
        margin-bottom: 5px;
        padding-left: 10px;
    }

    .rule-title {
        border: none;
        padding-bottom: 0;
    }

    .rule-body {
        padding: 0px 10px;

        table tbody tr:last-child {
            border: none;
            th, td {
                border: none;
            }
        }
    }
}

.agent-utility-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;

    .merge-utility {
        display: flex;
        gap: 3px;

        input {
            outline: none !important;
            box-shadow: none !important;
        }
    }
    
    .utility-wrapper {
        border: 1px dotted var(--bs-primary);
        border-radius: 5px;
        padding: 10px;

        .utility-row {

            .utility-label {
                width: 30%;
                font-size: 0.95em;
                flex-wrap: wrap;
            }

            .utility-value {
                width: 70%;
                display: flex;
                gap: 5px;

                .add-list {
                    font-size: 20px;
                }
            }

            .utility-input {
                width: 95%;
            }

            .utility-delete {
                width: 5%;
            }
        }

        .utility-row-primary {
            display: flex;

            .utility-label {
                display: flex;
                gap: 10px;

                .utility-tooltip {
                    display: flex;
                }

                input {
                    outline: none !important;
                    box-shadow: none !important;
                }
            }
        }

        .utility-row-secondary {
            display: flex;
            flex-direction: column;

            .utility-content {
                display: flex;
                flex-direction: column;
                gap: 3px;
                border-top: 1px dotted var(--bs-primary);
                margin-top: 10px;
                padding-top: 10px;
                max-height: 350px;
                overflow-y: auto;
                scrollbar-width: none;

                .utility-list-item {
                    display: flex;

                    .utility-label {
                        font-size: 0.95em;
                    }
                }
            }
        }
    }
}

.agent-card-header {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.agent-label-container {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 5px 0px;
}